<template>
  <div id="goods-kinds">
    <scroll class="content" :probetype="3">
      <content-category :content-top="contentTop"/>
      <tab-control :titles="['流行', '新款', '热门']" class="tab-control"/>
      <goods-list :goods="contentBottom"/>
    </scroll>
  </div>
</template>

<script>
  import Scroll from "@/components/common/scroll/Scroll";
  import TabControl from "@/components/content/tabControl/TabControl";
  import GoodsList from "@/components/content/goods/GoodsList";

  import ContentCategory from "./ContentCategory";


  export default {
    name: "CategoryContent",
    components:{
      Scroll,
      TabControl,
      GoodsList,
      ContentCategory,

    },
    props:{
      contentTop:{
        type:Array,
        default(){
          return []
        }
      },
      contentBottom:{
        type:Array,
        default(){
          return []
        }
      }
    },
    methods: {

    },
  }
</script>

<style scoped>
  .content{
    position: absolute;
    left: 22%;
    right: 0;
    top: 44px;
    bottom: 49px;
    background-color: rgb(255,255,255);
    overflow: hidden;
  }
  .tab-control{
    position: relative;
    top: -10px;
  }
</style>